<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- viewport设置：让页面在手机等移动设备上正常显示（适配不同屏幕宽度） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致筑网 - 产品应用商店登录</title>

    <!-- 引入Bootstrap样式库：前端常用的UI框架，提供现成的按钮、表单等样式，不用自己写大量CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 引入Font Awesome图标库：提供各种图标（如建筑图标、身份证图标），增强页面视觉效果 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        /* 页面基础样式：整个页面的背景和布局设置 */
        body {
            /* 背景图：选择建筑/工程类图片，突出公司业务特色 */
            background-image: url('https://picsum.photos/id/1067/1920/1080');
            background-size: cover; /* 图片铺满整个屏幕 */
            background-position: center; /* 图片居中显示 */
            background-color: #f0f2f5; /* 备用背景色：如果图片加载失败，显示浅灰色 */
            min-height: 100vh; /* 页面高度至少等于屏幕高度，确保内容居中 */
            /* Flex布局：让登录卡片在页面中垂直和水平居中 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            padding: 20px; /* 页面边缘留空白，避免内容贴边 */
            position: relative; /* 为背景遮罩做准备 */
        }

        /* 背景遮罩：降低背景图的对比度，让前景的登录框更清晰 */
        body::before {
            content: ''; /* 伪元素必须有content属性 */
            position: absolute; /* 绝对定位，覆盖整个页面 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.85); /* 半透明白色遮罩 */
            z-index: -1; /* 遮罩放在背景图上方，内容下方 */
        }

        /* 登录卡片样式：整个登录表单的容器 */
        .login-card {
            width: 100%; /* 宽度自适应父容器 */
            max-width: 520px; /* 最大宽度，防止在大屏幕上太宽 */
            background-color: #fff; /* 白色背景，清晰显示表单 */
            border-radius: 12px; /* 圆角边框，更美观 */
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* 轻微阴影，让卡片有悬浮感 */
            overflow: hidden; /* 防止内部元素超出卡片边框 */
            border-top: 4px solid #1e5ba8; /* 顶部蓝色线条，突出行业特色（工程蓝） */
        }

        /* 卡片头部样式：包含公司Logo和名称 */
        .card-header {
            background-color: #f8f9fa; /* 浅灰色背景，与主体区分 */
            padding: 1.5rem; /* 内边距，让内容不贴边 */
            border-bottom: 1px solid #eee; /* 底部边框，分隔头部和主体 */
        }

        /* 公司Logo容器：水平排列图标和文字 */
        .company-logo {
            display: flex; /* Flex布局：图标和文字并排显示 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: center; /* 水平居中 */
            margin-bottom: 0.8rem; /* 与下方文字保持距离 */
        }

        /* 行业图标样式 */
        .company-logo i {
            font-size: 2rem; /* 图标大小 */
            color: #1e5ba8; /* 工程蓝色，突出行业属性 */
            margin-right: 0.8rem; /* 与文字保持距离 */
        }

        /* 公司名称样式 */
        .company-name {
            font-size: 1.5rem; /* 文字大小 */
            font-weight: 600; /* 加粗，突出显示 */
            color: #2c3e50; /* 深灰色，专业稳重 */
        }

        /* 头部说明文字 */
        .card-header p {
            text-align: center; /* 文字居中 */
            color: #666; /* 灰色，次要信息 */
            margin-bottom: 0; /* 去除默认间距 */
            font-size: 0.95rem; /* 稍小字体 */
        }

        /* 登录类型切换标签样式 */
        .login-tabs {
            margin-bottom: 1.8rem; /* 与下方表单保持距离 */
        }

        /* 标签容器：让两个标签居中显示 */
        .login-tabs .nav {
            justify-content: center; /* 水平居中 */
            border-bottom: 1px solid #eee; /* 底部边框，作为标签的下划线背景 */
        }

        /* 单个标签样式 */
        .login-tabs .nav-link {
            padding: 0.8rem 2rem; /* 内边距，增大点击区域 */
            font-size: 1rem; /* 文字大小 */
            font-weight: 500; /* 中等加粗 */
            color: #666; /* 未选中时灰色 */
            border: none; /* 去掉默认边框 */
            border-bottom: 2px solid transparent; /* 预留选中时的下划线位置 */
            margin-bottom: -1px; /* 与底部边框重叠，避免出现两条线 */
        }

        /* 标签鼠标悬停效果 */
        .login-tabs .nav-link:hover {
            color: #1e5ba8; /* 鼠标放上时变工程蓝 */
            background-color: transparent; /* 去掉默认背景色 */
        }

        /* 选中的标签样式 */
        .login-tabs .nav-link.active {
            color: #1e5ba8; /* 文字变工程蓝 */
            border-bottom-color: #1e5ba8; /* 下划线变工程蓝 */
            background-color: transparent; /* 去掉默认背景色 */
        }

        /* 表单区域样式 */
        .card-body {
            padding: 2rem; /* 内边距，让内容不贴边 */
        }

        /* 表单标签样式 */
        .form-label {
            color: #444; /* 深灰色，清晰可见 */
            font-weight: 500; /* 中等加粗 */
            margin-bottom: 0.5rem; /* 与输入框保持距离 */
        }

        /* 输入框样式 */
        .form-control {
            padding: 0.9rem 1rem; /* 内边距，让输入更舒适 */
            border: 1px solid #ddd; /* 边框颜色 */
            border-radius: 6px; /* 圆角边框 */
            transition: all 0.3s ease; /* 样式变化时的动画效果 */
        }

        /* 输入框获取焦点时的样式（用户点击输入框时） */
        .form-control:focus {
            border-color: #1e5ba8; /* 边框变工程蓝 */
            box-shadow: 0 0 0 3px rgba(30, 91, 168, 0.1); /* 浅蓝色阴影，突出当前输入框 */
            outline: none; /* 去掉浏览器默认的焦点轮廓 */
        }

        /* 登录按钮样式 */
        .btn-login {
            background-color: #1e5ba8; /* 工程蓝背景 */
            border-color: #1e5ba8; /* 边框颜色与背景一致 */
            padding: 0.9rem; /* 内边距，增大按钮面积 */
            font-size: 1rem; /* 文字大小 */
            font-weight: 500; /* 中等加粗 */
            border-radius: 6px; /* 圆角边框 */
            transition: all 0.3s ease; /* 样式变化动画 */
        }

        /* 按钮鼠标悬停效果 */
        .btn-login:hover {
            background-color: #184a8c; /* 颜色加深 */
            border-color: #184a8c; /* 边框颜色同步加深 */
            transform: translateY(-2px); /* 轻微上浮，有点击反馈感 */
            box-shadow: 0 4px 12px rgba(30, 91, 168, 0.2); /* 阴影加深，增强立体感 */
        }

        /* 按钮禁用状态样式（如登录中） */
        .btn-login:disabled {
            background-color: #1e5ba8; /* 保持原色 */
            border-color: #1e5ba8;
            opacity: 0.7; /* 降低透明度，表示不可用 */
            transform: none; /* 取消上浮效果 */
            box-shadow: none; /* 取消阴影 */
        }

        /* 错误提示文字样式 */
        .error-message {
            color: #dc3545; /* 红色，表示错误 */
            font-size: 0.875rem; /* 小字体 */
            margin-top: 0.4rem; /* 与输入框保持距离 */
            display: none; /* 默认隐藏，错误时才显示 */
        }

        /* 工作人员登录说明文字 */
        .staff-note {
            text-align: center; /* 居中显示 */
            color: #666; /* 灰色，次要信息 */
            font-size: 0.85rem; /* 小字体 */
            margin-top: 1rem; /* 与按钮保持距离 */
        }

        /* 说明文字中的图标 */
        .staff-note i {
            color: #1e5ba8; /* 工程蓝，与品牌呼应 */
            margin-right: 0.3rem; /* 与文字保持距离 */
        }

        /* 卡片底部样式 */
        .card-footer {
            background-color: #f8f9fa; /* 浅灰色背景，与头部呼应 */
            padding: 1rem 2rem; /* 内边距 */
            border-top: 1px solid #eee; /* 顶部边框，分隔主体和底部 */
            text-align: center; /* 内容居中 */
        }

        /* 底部文字样式 */
        .footer-text {
            color: #666; /* 灰色 */
            font-size: 0.875rem; /* 小字体 */
            margin-bottom: 0; /* 去除默认间距 */
        }

        /* 底部文字中的关键词 */
        .footer-text span {
            color: #1e5ba8; /* 工程蓝，突出公司业务 */
            font-weight: 500; /* 加粗 */
        }
    </style>
</head>
<body>
<!-- 登录卡片容器：整个登录界面的主体 -->
<div class="card login-card">
    <!-- 卡片头部：显示公司信息 -->
    <div class="card-header">
        <div class="company-logo">
            <!-- 行业图标：使用建筑相关图标，突出公司业务 -->
            <i class="fa fa-building-o" aria-hidden="true"></i>
            <h2 class="company-name">致筑网</h2>
        </div>
        <p>应用商店 · 让工程更简单</p>
    </div>

    <!-- 卡片主体：包含登录类型切换和登录表单 -->
    <div class="card-body">
        <!-- 登录类型切换标签：普通用户/工作人员 -->
        <div class="login-tabs">
            <ul class="nav nav-tabs" id="loginTypeTabs" role="tablist">
                <!-- 普通用户登录标签 -->
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="user-login-tab" data-bs-toggle="tab"
                            data-bs-target="#user-login" type="button" role="tab"
                            aria-controls="user-login" aria-selected="true">
                        普通用户登录
                    </button>
                </li>
                <!-- 公司工作人员登录标签 -->
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="staff-login-tab" data-bs-toggle="tab"
                            data-bs-target="#staff-login" type="button" role="tab"
                            aria-controls="staff-login" aria-selected="false">
                        工作人员登录
                    </button>
                </li>
            </ul>
        </div>

        <!-- 登录表单容器：根据选择的标签显示对应的表单 -->
        <div class="tab-content" id="loginTypeTabsContent">
            <!-- 1. 普通用户登录表单 -->
            <div class="tab-pane fade show active" id="user-login" role="tabpanel" aria-labelledby="user-login-tab">
                <form id="userLoginForm">
                    <!-- 账号输入框 -->
                    <div class="mb-4">
                        <label for="userAccount" class="form-label">账号</label>
                        <input type="text" class="form-control" id="userAccount"
                               placeholder="请输入用户名/手机号" required>
                        <div class="error-message" id="userAccountError"></div> <!-- 账号错误提示 -->
                    </div>
                    <!-- 密码输入框 -->
                    <div class="mb-4">
                        <label for="userPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="userPassword"
                               placeholder="请输入6-20位密码" required>
                        <div class="error-message" id="userPasswordError"></div> <!-- 密码错误提示 -->
                    </div>
                    <!-- 登录按钮（含加载状态） -->
                    <div>
                        <button type="submit" class="btn btn-primary w-100 btn-login" id="userLoginBtn">
                            <span id="userLoginBtnText">普通用户 - 登录</span>
                            <!-- 加载动画：默认隐藏，登录时显示 -->
                            <span id="userLoginLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none; margin-left: 0.5rem;"></span>
                        </button>
                    </div>
                    <!-- 注册入口 -->
                    <div class="text-center mb-6">
                        <span class="text-neutral-500">还没有账号? </span>
                        <a href="/temp/register">立即注册</a>
                    </div>
                </form>
            </div>

            <!-- 2. 公司工作人员登录表单 -->
            <div class="tab-pane fade" id="staff-login" role="tabpanel" aria-labelledby="staff-login-tab">
                <form id="staffLoginForm">
                    <!-- 工号输入框（强调行业属性） -->
                    <div class="mb-4">
                        <label for="staffAccount" class="form-label">
                            <i class="fa fa-id-card-o" aria-hidden="true" style="color: #1e5ba8; margin-right: 0.3rem;"></i>
                            工号/账号
                        </label>
                        <input type="text" class="form-control" id="staffAccount"
                               placeholder="请输入公司工号（如：ZZ2024001）" required>
                        <div class="error-message" id="staffAccountError"></div> <!-- 工号错误提示 -->
                    </div>
                    <!-- 密码输入框 -->
                    <div class="mb-4">
                        <label for="staffPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="staffPassword"
                               placeholder="请输入工作人员密码" required>
                        <div class="error-message" id="staffPasswordError"></div> <!-- 密码错误提示 -->
                    </div>
                    <!-- 登录按钮（含加载状态） -->
                    <button type="submit" class="btn btn-primary w-100 btn-login" id="staffLoginBtn">
                        <span id="staffLoginBtnText">工作人员 - 登录</span>
                        <!-- 加载动画：默认隐藏，登录时显示 -->
                        <span id="staffLoginLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none; margin-left: 0.5rem;"></span>
                    </button>
                    <!-- 注册入口 -->
                    <div class="text-center mb-6">
                        <span class="text-neutral-500">还没有账号? </span>
                        <a href="/temp/register">立即注册</a>
                    </div>
                    <!-- 工作人员标注：明确使用场景 -->
                    <div class="staff-note">
                        <i class="fa fa-info-circle" aria-hidden="true"></i>
                        仅限地址勘测、隧道、建筑项目工作人员使用
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 卡片底部：版权信息和业务说明 -->
    <div class="card-footer">
        <p class="footer-text">
            © 2024 致筑网 · 专注<span>地址勘测</span>、<span>隧道工程</span>、<span>建筑设备</span>（全站仪/水平仪）相关产品服务
        </p>
    </div>
</div>

<!-- 引入必要的JavaScript库 -->
<!-- Bootstrap JS：用于实现标签切换等交互功能 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Axios库：用于发送HTTP请求（调用后端接口），比浏览器原生的fetch更简单 -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>

<script>
    // ==============================================
    // 1. 核心配置：后端接口地址（请你根据实际后端地址修改）
    // 类似Java中的常量配置类（static final变量）
    // ==============================================
    const API_CONFIG = {
        USER_LOGIN_URL: "/system/auth/login",    // 普通用户登录接口地址
        STAFF_LOGIN_URL: "/system/auth/login"  // 工作人员登录接口地址
    };

    // ==============================================
    // 2. Token工具类：统一管理Token的存储、获取和删除
    // 类似Java中的工具类（Util class）
    // 后续所有接口需要携带Token时，直接调用这里的方法
    // ==============================================
    const TokenUtil = {
        // Token在localStorage中存储的键名（类似Map的key）
        TOKEN_KEY: "zhizhu_app_store_token",

        // 保存Token到本地存储（localStorage是浏览器提供的本地存储，关闭浏览器后不丢失）
        saveToken: function(token) {
            // 检查token是否有效（非空且为字符串）
            if (token && typeof token === "string") {
                // 存储token（类似Java的Map.put(key, value)）
                localStorage.setItem(this.TOKEN_KEY, token);
                console.log("Token保存成功：", token); // 控制台打印日志，方便调试
            }
        },

        // 从本地存储获取Token
        getToken: function() {
            // 获取token（类似Java的Map.get(key)）
            const token = localStorage.getItem(this.TOKEN_KEY);
            console.log("当前Token：", token || "未存储Token"); // 打印日志
            return token;
        },

        // 删除Token（退出登录时使用）
        removeToken: function() {
            // 删除token（类似Java的Map.remove(key)）
            localStorage.removeItem(this.TOKEN_KEY);
            console.log("Token已删除");
        }
    };

    // ==============================================
    // 3. 加载状态工具类：控制登录按钮的加载动画
    // 避免用户重复点击按钮发送多次请求
    // ==============================================
    const LoadingUtil = {
        // 显示加载状态（按钮禁用+显示加载动画）
        // 参数说明：
        // btnId：按钮的ID
        // btnTextId：按钮文字的ID
        // loadingId：加载动画的ID
        showLoading: function(btnId, btnTextId, loadingId) {
            // 通过ID获取页面元素（类似Java的findViewById）
            const btn = document.getElementById(btnId);
            const btnText = document.getElementById(btnTextId);
            const loading = document.getElementById(loadingId);

            btn.disabled = true;          // 禁用按钮，防止重复点击
            btnText.textContent = "登录中..."; // 更改按钮文字
            loading.style.display = "inline-block"; // 显示加载动画
        },

        // 隐藏加载状态（按钮启用+恢复文字）
        // originalText：按钮原来的文字
        hideLoading: function(btnId, btnTextId, loadingId, originalText) {
            const btn = document.getElementById(btnId);
            const btnText = document.getElementById(btnTextId);
            const loading = document.getElementById(loadingId);

            btn.disabled = false;         // 启用按钮
            btnText.textContent = originalText; // 恢复原文字
            loading.style.display = "none"; // 隐藏加载动画
        }
    };

    // ==============================================
    // 4. 表单验证工具类：验证账号和密码的格式
    // 在发送请求到后端前先做前端验证，减少无效请求
    // ==============================================
    const FormValidator = {
        // 验证账号：非空 + 长度（1-20位）
        // 参数：
        // account：输入的账号
        // errorDomId：显示错误信息的元素ID
        validateAccount: function(account, errorDomId) {
            // 获取显示错误的元素
            const errorDom = document.getElementById(errorDomId);

            // 1. 空值校验：去除前后空格后如果为空，提示错误
            if (!account.trim()) {
                errorDom.textContent = "账号不能为空";
                errorDom.style.display = "block"; // 显示错误提示
                return false; // 验证失败
            }

            // 2. 长度校验：账号长度必须在1-20位之间
            if (account.trim().length < 1 || account.trim().length > 20) {
                errorDom.textContent = "账号长度需在1-20位之间";
                errorDom.style.display = "block";
                return false; // 验证失败
            }

            // 验证通过：隐藏错误提示
            errorDom.style.display = "none";
            return true; // 验证成功
        },

        // 验证密码：非空 + 长度（6-20位）
        // 参数同账号验证
        validatePassword: function(password, errorDomId) {
            const errorDom = document.getElementById(errorDomId);

            // 1. 空值校验
            if (!password.trim()) {
                errorDom.textContent = "密码不能为空";
                errorDom.style.display = "block";
                return false;
            }

            // 2. 长度校验
            if (password.trim().length < 6 || password.trim().length > 20) {
                errorDom.textContent = "密码长度需在6-20位之间";
                errorDom.style.display = "block";
                return false;
            }

            // 验证通过
            errorDom.style.display = "none";
            return true;
        },

        // 清空指定错误提示（输入框获得焦点时调用）
        clearError: function(errorDomId) {
            const errorDom = document.getElementById(errorDomId);
            errorDom.textContent = ""; // 清空错误文字
            errorDom.style.display = "none"; // 隐藏错误提示
        }
    };

    // ==============================================
    // 5. 登录API工具类：调用后端接口，处理登录逻辑
    // 类似Java中的Service层，封装业务逻辑
    // ==============================================
    const LoginApi = {
        // 普通用户登录
        // 参数：账号和密码
        // async表示这是一个异步函数，内部可以使用await等待请求结果
        userLogin: async function(account, password) {
            try {
                // 发送POST请求到后端登录接口（使用axios库）
                // 类似Java的RestTemplate.postForObject()
                const response = await axios.post(API_CONFIG.USER_LOGIN_URL, {
                    username: account.trim(),  // 去除前后空格
                    password: password.trim() // 去除前后空格
                    // 注意：如果后端要求密码加密（如MD5），可以在这里添加加密逻辑
                });

                // 假设后端返回格式为：
                // { code: 200, message: "登录成功", data: { token: "xxx" } }
                // 请根据你实际的后端返回格式修改这里的判断逻辑
                if (response.data && response.data.code === 0) {
                    // 登录成功：保存Token到本地
                    const token = response.data.data.accessToken;
                    TokenUtil.saveToken(token);

                    // 提示用户并跳转到首页
                    alert("登录成功！即将跳转到产品应用商店");
                    window.location.href = "/temp/app_index"; // 首页地址，请修改为实际地址
                    return true;
                } else {
                    // 后端返回业务错误（如账号密码错误）
                    alert("登录失败：" + (response.data.message || "未知错误"));
                    return false;
                }
            } catch (error) {
                // 捕获异常：网络错误或后端接口异常（如404、500错误）
                console.error("普通用户登录请求异常：", error); // 打印错误日志
                alert("登录异常：请检查网络连接或联系管理员");
                return false;
            }
        },

        // 工作人员登录（逻辑与普通用户类似，仅接口地址不同）
        staffLogin: async function(account, password) {
            try {
                const response = await axios.post(API_CONFIG.STAFF_LOGIN_URL, {
                    username: account.trim(),
                    password: password.trim()
                });

                if (response.data && response.data.code === 0) {
                    const token = response.data.data.accessToken;
                    TokenUtil.saveToken(token);
                    alert("工作人员登录成功！即将跳转到管理后台");
                    window.location.href = "/temp/manage"; // 工作人员首页地址
                    return true;
                } else {
                    alert("登录失败：" + (response.data.message || "未知错误"));
                    return false;
                }
            } catch (error) {
                console.error("工作人员登录请求异常：", error);
                alert("登录异常：请检查网络连接或联系管理员");
                return false;
            }
        }
    };

    // ==============================================
    // 6. 页面初始化：绑定事件，实现交互逻辑
    // 类似Java的main方法，页面加载完成后执行
    // ==============================================
    document.addEventListener("DOMContentLoaded", function() {
        // DOMContentLoaded事件：当页面的HTML加载完成并解析后触发
        // 确保此时页面元素已经存在，可以安全地操作

        // --------------------------
        // 普通用户登录表单提交事件
        // --------------------------
        const userLoginForm = document.getElementById("userLoginForm");
        // 给表单绑定submit事件（用户点击登录按钮或按回车时触发）
        userLoginForm.addEventListener("submit", async function(e) {
            // 阻止表单默认提交行为（默认会刷新页面，这里需要用AJAX提交）
            e.preventDefault();

            // 1. 获取表单输入值
            const account = document.getElementById("userAccount").value;
            const password = document.getElementById("userPassword").value;

            // 2. 前端表单验证（验证不通过则不发送请求）
            const isAccountValid = FormValidator.validateAccount(account, "userAccountError");
            const isPasswordValid = FormValidator.validatePassword(password, "userPasswordError");
            if (!isAccountValid || !isPasswordValid) {
                return; // 验证失败，退出函数
            }

            // 3. 显示加载状态（防止用户重复点击）
            LoadingUtil.showLoading("userLoginBtn", "userLoginBtnText", "userLoginLoading");

            // 4. 调用登录API（等待登录结果）
            await LoginApi.userLogin(account, password);

            // 5. 隐藏加载状态（无论成功/失败，都恢复按钮状态）
            LoadingUtil.hideLoading("userLoginBtn", "userLoginBtnText", "userLoginLoading", "普通用户 - 登录");
        });

        // --------------------------
        // 工作人员登录表单提交事件
        // --------------------------
        const staffLoginForm = document.getElementById("staffLoginForm");
        staffLoginForm.addEventListener("submit", async function(e) {
            e.preventDefault(); // 阻止默认提交

            // 1. 获取表单输入值
            const account = document.getElementById("staffAccount").value;
            const password = document.getElementById("staffPassword").value;

            // 2. 前端表单验证
            const isAccountValid = FormValidator.validateAccount(account, "staffAccountError");
            const isPasswordValid = FormValidator.validatePassword(password, "staffPasswordError");
            if (!isAccountValid || !isPasswordValid) {
                return;
            }

            // 3. 显示加载状态
            LoadingUtil.showLoading("staffLoginBtn", "staffLoginBtnText", "staffLoginLoading");

            // 4. 调用登录API
            await LoginApi.staffLogin(account, password);

            // 5. 隐藏加载状态
            LoadingUtil.hideLoading("staffLoginBtn", "staffLoginBtnText", "staffLoginLoading", "工作人员 - 登录");
        });

        // --------------------------
        // 输入框聚焦时清空错误提示（提升用户体验）
        // 当用户点击输入框准备重新输入时，自动清除之前的错误提示
        // --------------------------
        // 普通用户输入框
        document.getElementById("userAccount").addEventListener("focus", function() {
            FormValidator.clearError("userAccountError");
        });
        document.getElementById("userPassword").addEventListener("focus", function() {
            FormValidator.clearError("userPasswordError");
        });
        // 工作人员输入框
        document.getElementById("staffAccount").addEventListener("focus", function() {
            FormValidator.clearError("staffAccountError");
        });
        document.getElementById("staffPassword").addEventListener("focus", function() {
            FormValidator.clearError("staffPasswordError");
        });
    });
</script>
</body>
</html>
